<template>
  <div class="todo-header">
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__tada"
        leave-active-class="animate__backOutDown"
    >
      <h1 v-show="!isShow" key="1">你好！</h1>
      <h1 v-show="isShow" key="2">众鑫源</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css';
export default {
  //注意不管是你写的data也还还是methods也好，甚至是computed计算属性也好都会出现在组件事例对象vc身上
  //属性值不能重名
  name: "Test",
  data(){
    return {
      isShow: true
    }
  },
}
</script>

<style scoped>
h1{
  background-color: #5bc0de;
}
</style>
